.fr-wrapper {
    overflow: scroll;
    height: 60vh;
}

.bouncing-loader {
    display: flex;
    justify-content: left;
  }
  
  .bouncing-loader > div {
    width: 8px;
    height: 8px;
    margin: 2px 4px;
    border-radius: 50%;
    background-color: #aa16e4;
    opacity: 1;
    animation: bouncing-loader 0.6s infinite alternate;
  }

  @keyframes bouncing-loader {
    to {
      opacity: 0.1;
      transform: translateY(-10px);
    }
  }
  
  .bouncing-loader > div:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .bouncing-loader > div:nth-child(3) {
    animation-delay: 0.4s;
  }

  /* clicked paragraph background setting */
.clicked {
  background-color: aquamarine;
}


/* Jodit Editor setting */
.jodit-wysiwyg{
  height: 56vh !important;
  overflow-y: scroll;
}

.jodit-wysiwyg > * {
  background: none !important;
}

.jodit-wysiwyg > * > *{
  background: none !important;
}

.jodit-color-picker__extra {
  height: 0;
  overflow: hidden;
}

.jodit-popup__content {
  background: #f2f9ff!important;
}

.jodit-ui-button_Border {
  display: none!important;
}

/* Sprinkle */
.sprinkle-container {
  position: relative;
  display: inline-block;
}

.thumb-up {
  position: relative;
  z-index: 1;
}

.sprinkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sprinkle {
  width: 6px;
  height: 6px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  animation: sprinkle-animation 0.6s ease-out forwards;
  opacity: 0;
}

.sprinkle:nth-child(1) {
  top: -20px;
  left: -20px;
  background-color: red;
  width: 8px;
  height: 8px;
  animation-delay: 0s;
}

.sprinkle:nth-child(2) {
  top: -25px;
  left: 20px;
  background-color: blue;
  width: 5px;
  height: 5px;
  animation-delay: 0.1s;
}

.sprinkle:nth-child(3) {
  top: 10px;
  left: 25px;
  background-color: yellow;
  width: 7px;
  height: 7px;
  animation-delay: 0.2s;
}

.sprinkle:nth-child(4) {
  top: 25px;
  left: -25px;
  background-color: orange;
  width: 6px;
  height: 6px;
  animation-delay: 0.3s;
}

.sprinkle:nth-child(5) {
  top: -30px;
  left: 10px;
  background-color: purple;
  width: 9px;
  height: 9px;
  animation-delay: 0.4s;
}

.sprinkle:nth-child(6) {
  top: 5px;
  left: -30px;
  background-color: pink;
  width: 6px;
  height: 6px;
  animation-delay: 0.5s;
}

.sprinkle:nth-child(7) {
  top: -35px;
  left: 5px;
  background-color: cyan;
  width: 7px;
  height: 7px;
  animation-delay: 0.6s;
}

.sprinkle:nth-child(8) {
  top: 20px;
  left: 30px;
  background-color: lime;
  width: 8px;
  height: 8px;
  animation-delay: 0.7s;
}

.sprinkle:nth-child(9) {
  top: -40px;
  left: -10px;
  background-color: magenta;
  width: 6px;
  height: 6px;
  animation-delay: 0.8s;
}

.sprinkle:nth-child(10) {
  top: 30px;
  left: -35px;
  background-color: teal;
  width: 9px;
  height: 9px;
  animation-delay: 0.9s;
}

.sprinkle:nth-child(11) {
  top: -45px;
  left: 15px;
  background-color: violet;
  width: 6px;
  height: 6px;
  animation-delay: 1s;
}

.sprinkle:nth-child(12) {
  top: 35px;
  left: -40px;
  background-color: navy;
  width: 7px;
  height: 7px;
  animation-delay: 1.1s;
}

.sprinkle:nth-child(13) {
  top: -50px;
  left: 20px;
  background-color: olive;
  width: 5px;
  height: 5px;
  animation-delay: 1.2s;
}

.sprinkle:nth-child(14) {
  top: 40px;
  left: -45px;
  background-color: coral;
  width: 8px;
  height: 8px;
  animation-delay: 1.3s;
}

.sprinkle:nth-child(15) {
  top: -55px;
  left: 25px;
  background-color: maroon;
  width: 9px;
  height: 9px;
  animation-delay: 1.4s;
}

@keyframes sprinkle-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.focus\:bg-accent:focus {
  background-color: transparent !important;
}

[data-state="open"].menu-profile {
  background-color: #0c067c !important;
}

/* body {
  background: black;
}


 /* body {
   background: white;
 }

 .line-container {
   position: absolute;
   top: 50%;
   right: 50%;
   height: 0;
   transform-origin: right;
 }

 .line {
   background-color: darkorange;
   width: 100%;
   height: 0.5px;
   position: absolute;
   box-shadow: 0 0 1em darkred;

   animation-name: firework;
   animation-duration: 4s;
   animation-timing-function: cubic-bezier(0.26, 0.83, 0.26, 0.83);
   animation-iteration-count: infinite;
 }

 .dot {
   border-radius: 50%;
   position: relative;

   animation-name: fireworkflame;
   animation-duration: 4s;
   animation-iteration-count: infinite;
 }

 /* Firework Keyframes */
 
/* @keyframes firework {

   0%,
   100% {
     left: 100%;
     width: 0%;
   }

   5% {
     left: 40%;
     width: 60%;
   }

   50% {
     left: 0;
     width: 0%;
   }
 }

 /* Firework Flame Keyframes */
/* @keyframes fireworkflame {

   0%,
   15%,
   100% {
     background-color: transparent;
   }

   50% {
     background-color: salmon;
   }
 }

 /* Generate 800 fireworks dynamically */
 /* Description */ 